<!DOCTYPE html>
<html lang="en">
<head>
    <title>APP电访</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=4a6c1b54">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
        }

        body {
            background: #eee;
        }

        .btn-blue {
            border: none;
            background: #2a8ced;
            color: #fff;
            height: 30px;
            width: 14%;
            border-radius: 3px;
        }

        .visitingBox {
            background: #fff;
        }

        .item {
            height: 45px;
            line-height: 45px;
            margin-left: 20px;
            font-size: 14px;
            border-bottom: 1px solid #ddd;
        }

        .item .title {
            padding-left: 5px;
            height: 45px;
            line-height: 45px;
            position: relative;
            font-size: 16px;
            color: #333;
            float: left;
            position: relative;
        }

        .item .title i {
            position: absolute;
            left: -10px;
            top: 2px;
            color: red;
            font-size: 16px;
        }

        .item .value {
            float: right;
        }

        .value input {
            border: none;
            height: 43px;
            line-height: 43px;
            text-align: right;
            padding-right: 20px;
            color: #2a8cec;
        }

        .btn-blue.focus, .btn-blue:focus, .btn-blue:hover {
            color: #fff;
            text-decoration: none;
        }

        .btn.focus, .btn:focus, .btn:hover {
            color: #fff;
            text-decoration: none;
        }

        .lineTwo span {
            max-height: 55px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-align: left;
            padding: 5px;

        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .imgBox {
            margin-left: 20px;
        }

        .imgBox .title {
            padding-left: 5px;
            height: 45px;
            line-height: 45px;
            position: relative;
            font-size: 16px;
            color: #333;
        }

        .imgBox .title i {
            position: absolute;
            left: -10px;
            top: 2px;
            color: red;
            font-size: 16px;
        }

        .imgBox img {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
        }

        .imgBox .desc {
            color: #aaa;
        }

        .btnBox {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            margin-top: 60px;
            position: relative;
        }

        .btnBj {
            background: #cde2f7;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            position: relative;
            animation: mymove 3s infinite;
            -webkit-animation: mymove 3s infinite; /*Safari and Chrome*/
            animation-direction: alternate; /*轮流反向播放动画。*/
            animation-timing-function: linear; /*动画的速度曲线*/
            /* Safari 和 Chrome */
            -webkit-animation: mymove 3s infinite;
            -webkit-animation-direction: alternate; /*轮流反向播放动画。*/
        }

        .btn.active {
            background: #2a8cec;
        }

        .btn {
            position: absolute;
            width: 96px;
            height: 96px;
            left: 50%;
            top: 50%;
            margin-left: -48px;
            margin-top: -48px;
            border-radius: 50%;
            background: #dfdfdf;
            color: #fff;
        }

        .btn .time {
            font-size: 20px;
            margin-top: 14px;
        }

        .btn .start {
            font-size: 16px;
        }

        @keyframes mymove {
            0% {
                transform: scale(1); /*开始为原始大小*/
            }

            50% {
                transform: scale(0.8);
            }

        }

        @-webkit-keyframes mymove /*Safari and Chrome*/
        {
            0% {
                transform: scale(1); /*开始为原始大小*/
            }

            50% {
                transform: scale(0.8);
            }
        }

        .descBox {
            margin-left: 20px;
            padding-bottom: 10px;
        }

        .descBox .title {
            padding-left: 5px;
            height: 45px;
            line-height: 45px;
            position: relative;
            font-size: 16px;
            color: #333;
        }

        .centerBox {
            height: 80px;
            padding-right: 20px;
        }

        .centerBox textarea {
            width: 100%;
            height: 100%;
            padding: 8px 5px;
            color: #2a8cec;
        }

        .descBox .desc {
            color: #aaa;
            margin-top: 10px;
        }

        .descBottom {
            font-size: 12px;
            margin: 20px;
        }

        .iconTel {
            width: 30px;
            margin-top: 25px;
        }

        .tijiaoBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }

    </style>
</head>
<body>
<section class="content" id="app" style="padding: 0px;" v-cloak>
    <div class="visitingBox">
        <div class="item">
            <div class="title"><i v-if="id">*</i>客户电话</div>
            <div class="value"><input type="tel" placeholder="请输入客户电话" v-model="info.tel"
                                      @blur="changeStatus"></div>
        </div>
        <div class="item">
            <div class="title"><i v-if="id">*</i>客户姓名</div>
            <div class="value"><input type="text" placeholder="请输入客户姓名" v-model="info.name"
                                      @blur="changeStatus"></div>
        </div>
        <!--<div class="item" v-if="id">-->
        <!--<div class="title">地址</div>-->
        <!--<div class="value"><input type="text" placeholder="请填写客户地址" v-model="info.visitAddress">-->
        <!--</div>-->
        <!--</div>-->

        <div class="descBox" v-if="id">
            <div class="title">基本情况（选填）</div>
            <div class="centerBox">
                <textarea name="" id="" cols="30" rows="10"
                          placeholder="资金情况、来源、已有设备、股东构成、行业经验、信誉、工程情况、竞争对手情况..."
                          v-model="info.visitContent"></textarea>
            </div>
            <div class="desc">提示：选填的内容会自动填入当日工作报告中</div>
        </div>
    </div>
    <div class="descBottom" v-if="!id">
        注意：<br><br>
        &nbsp; &nbsp; &nbsp;1.只有通过下方拨号按钮拨打的电话才能被录入OA系统<br>
        &nbsp; &nbsp; &nbsp;2.通话结束后，系统会弹框提示是否保存此次电访，如果客户未接或者其他情况可取消保存<br>
        &nbsp; &nbsp; &nbsp;3.如果有客户来电，可以在工作报告添加
    </div>
    <div class="btnBox" v-if="!id">
        <div class="btnBj ">
        </div>
        <div :class="isOk?'btn active':'btn' " @click="save">
            <img src="/dist/img/telV.png" alt="" class="iconTel">
            <div class="start">拨号</div>
        </div>
    </div>
    <div class="tijiaoBtn" v-else @click="save">保存</div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="/dist/plugins/scroll/myScroll.js"></script>
<!--框架已定义 JS-->
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        page: {
            urlParams: null,
            queryParams: {
                requestPage: 1,
                pageSize: 30
            },
            dataUrl: '',
            createQueryParams: function () {
            },
            getByPage: function (type) {
                $.ajax({
                    url: $.wyui.page.dataUrl,
                    data: JSON.stringify($.wyui.page.queryParams),
                    beforeSend: function () {

                    },
                    complete: function () {
                    },
                    success: function (r) {
                        $.wyui.page.queryParams.requestPage++;

                        if (r.data.sendData.pager && r.data.sendData.pager.pageCount == 0) {
                            r.data.sendData.pager.pageCount = 1;
                        }
                        if (type == "scroll") {
                            $.wyui.page.getByPage_scroll_callback(r.data.sendData.records);
                        } else {
                            if ($.wyui.page.getByPage_callback_new) {
                                $.wyui.page.getByPage_callback_new(r.data.sendData.records);
                            }
                        }

                    }
                });
            }
        },
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                        JSBridge.call(UI, 'showToast', {title: r.e.desc})
                    }
                },
                error: function (e) {
                    JSBridge.call(UI, 'showToast', {title: e.responseText})
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            id: getUrlParamObj().id,
            date: "",
            isOk: false,
            info: {
                id: getUrlParamObj().id,
                tel: "",
                name: "",
                visitMode: getUrlParamObj().visitMode,
                visitAddress: "",
                visitContent: "",
                wId: "",
                reportDate: new Date().Format("yyyy-MM-dd"),
                createUserId: getUrlParamObj().userId,
                createTime: "",

                arrivalsTime: "",
                arrivalsLongitude: "",
                arrivalsLatitude: "",
                arrivalsAddress: "",
                arrivalsImg: "",

                leaveTime: "",
                leaveLongitude: "",
                leaveLatitude: "",
                leaveAddress: "",
                leaveImg: "",

                visitTime: ""

            }
        },
        methods: {
            changeStatus: function () {
                //签到
                if (this.info.tel && this.info.name) {
                    if (this.info.tel.length >= 7) {
                        this.isOk = true;
                    } else {
                        JSBridge.call(UI, 'showToast', {title: "电话号码不正确"})
                        this.isOk = false;
                    }
                } else {
                    this.isOk = false;
                }
            },
            getInfo: function () {
                var that = this;
                JSBridge.call(UI, 'showLoading', {})
                $.wyui.postMethod('/wreportCusVisitLsz/getCustomerVisitLszById.json', {id: that.id}, function (data) {
                    JSBridge.call(UI, 'hideLoading')
                    that.info = data;
                });
            },
            save: function () {
                var that = this
                that.changeStatus()
                if (this.isOk) {
                    JSBridge.call(UI, 'showLoading', {})
                    var url = ''
                    if (!this.id) {
                        url = '/wreportCusVisitLsz/faceInApp.json'
                    } else {
                        url = '/wreportCusVisitLsz/faceOutApp.json'
                    }
                    $.wyui.postMethod(url, that.info, function (data) {
                        JSBridge.call(UI, 'hideLoading')
                        JSBridge.call(UI, 'showToast', {title: "保存成功"})
                        var param = {};
                        if (!that.id) {
                            var param = {
                                phoneNumber: that.info.tel,
                            }
                            JSBridge.call(DEVICE, 'makePhoneCall', param)
                        } else {
                            JSBridge.call(ROUTER, 'navigateBack', {backRefresh: true})
                        }
                    });
                } else {
                    if (!this.info.tel) {
                        JSBridge.call(UI, 'showToast', {title: "请填写客户电话"})
                        return false;
                    } else if (this.info.tel.length < 7) {
                        JSBridge.call(UI, 'showToast', {title: "电话号码不正确"})
                        return false
                    }
                    if (!this.info.name) {
                        JSBridge.call(UI, 'showToast', {title: "请填写姓名"})
                        return false;
                    }

                }
            }

        },
        mounted: function () {
            var that = this;
            var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
            _this.date = new Date().Format("hh:mm"); //修改数据date
            this.timer = setInterval(function () {
                _this.date = new Date().Format("hh:mm"); //修改数据date
            }, 1000)
            if (this.id) {
                this.getInfo()
            }
            //页面初次加载  执行客户分页列表
        }
    });

</script>

</body>